﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>

</head>
<style>
    body {
        background: #fff;
        overflow: auto;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    .talent {
        width: 98vw;
        max-width: 1300px;
        margin: 30px auto 0;
        display: flex;
    }

    .talent-left {
        width: calc(65% - 20px);
        margin-right: 20px;
    }

    .talent-right {
        width: 35%;
    }

    .talent-left-top {
        background: #fff;
        padding: 0 0 15px;
        display: flex;
        justify-content: space-between;
    }

    .photo {
        display: flex;
        align-items: flex-end;
    }

    .photo-img {
        background-size: cover;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: #8f8f8f;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

        .photo-img img {
            width: 100%;
        }

    .photo-constellatory {
        background: #e86153;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #fff;
        position: relative;
        left: -30px;
    }

    .talent-left-top-1 {
        display: flex;
        align-items: flex-start;
    }

    .Name-content {
        margin-left: 15px;
    }

        .Name-content h1 {
            color: #E0301E;
            font-size: 24px;
            margin: 0 0 15px 0;
        }

        .Name-content p {
            font-size: 18px;
            margin: 0 0 15px 0;
        }

            .Name-content p.Name-title {
                font-size: 16px;
                display: flex;
                margin: 0 0 10px 0;
            }

    .Name-title span {
        color: #D04A02;
        display: block;
        width: 100px;
    }

    .Name-title-1 {
        margin-top: 10px;
    }

    .edit-button {
        display: flex;
        align-items: flex-end;
        flex-flow: column;
        align-self: flex-end;
    }

        .edit-button button {
            border: solid 1px #e14131;
            color: #e14131;
            background-color: transparent;
            padding: 5px;
            margin-top: 10px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            width: 120px;
        }

            .edit-button button:hover {
                background: #e14131;
                color: #fff;
            }

        .edit-button i {
            font-size: 18px;
            margin: 0 5px;
        }

    .talent-left-main {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-left {
        width: calc(60% - 30px);
    }

        .talent-left-main-left h3 {
            font-size: 16px;
            font-weight: bold;
            border-bottom: solid 1px #eaeaea;
            padding-bottom: 10px;
            margin: 0;
            color: #404041;
        }

    .talent-left-main-right {
        width: 40%;
    }

    .talent-left-main-right-top {
        font-size: 12px;
        border-bottom: solid 1px #eaeaea;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-right-top-1 {
        display: flex;
        font-weight: bold;
        font-size: 16px;
    }

        .talent-left-main-right-top-1 span {
            color: #bcbcbc;
            display: block;
            margin-left: 3px;
        }

    .talent-left-main-right-top-2 a {
        color: #4d4d44;
        text-decoration: none;
        font-size: 12px;
    }

    .talent-left-main-right-top-2 i {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        vertical-align: middle;
        border-top: 3px dashed;
        border-top: 3px solid\9;
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
    }

    .talent-left-main-right-list ul {
        border: solid 1px #eaeaea;
        overflow: auto;
        max-height: 400px;
    }

        .talent-left-main-right-list ul li {
            display: flex;
            border-top: solid 1px #eaeaea;
            justify-content: space-between;
            padding: 10px 15px;
            flex-flow: column;
        }

            .talent-left-main-right-list ul li:first-child {
                border-top: none;
            }

    .right-list-content {
        display: flex;
        justify-content: space-between;
    }

    .right-list-right {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }

        .right-list-right i {
            border-radius: 50%;
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: #ec8f08;
            display: block;
            margin-bottom: 2px;
            color: #fff;
            text-align: center;
            font-size：20px;
        }

        .right-list-right span {
            font-size: 12px;
            color: #ec8f08;
        }

    .right-list-title {
        font-size: 14px;
        margin: 0;
    }

    .right-list-year {
        font-size: 12px;
        color: #8f8f8f;
        margin-top: 5px;
    }

    .right-list-Label {
        margin-top: 5px;
    }

        .right-list-Label span {
            background: #7d7d7d;
            color: #fff;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 25px;
        }

    .talent-right-Title {
        border-bottom: solid 1px #eaeaea;
        font-weight: bold;
        font-size: 16px;
        color: #2d2d2d;
    }

    .talent-right-1-m {
        display: flex;
        flex-wrap: wrap;
    }

        .talent-right-1-m p {
            width: 16.66%;
            margin: 10px 0;
        }

            .talent-right-1-m p i {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-size: cover;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                background-color: #eaeaea;
                color: #4d4d44;
                font-style: normal;
                overflow: hidden;
            }

                .talent-right-1-m p i a img {
                    width: 100%;
                }

    .talent-right-2 {
        margin-top: 15px;
    }

    .talent-right-2-m {
        overflow: auto;
        max-height: 220px;
        margin-top: 10px;
    }

    .talent-right-2-m-1 {
        color: #bcbcbc;
        display: block;
    }

        .talent-right-2-m-1 span {
            border-radius: 25px;
            background: #e0301e;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            padding: 3px 10px;
            line-height: 15px;
        }

    .talent-right-2-m-2 {
        margin-left: 10px;
    }

    .talent-right-2-m-2 {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .talent-left-main-right-tab {
        display: flex;
        position: relative;
        top: 1px;
    }

        .talent-left-main-right-tab p {
            border: solid 1px #eaeaea;
            padding: 3px 5px;
            font-size: 12px;
            margin: 10px 5px 0 0;
            border-bottom: 0;
        }

            .talent-left-main-right-tab p:hover,
            .talent-left-main-right-tab p.PSelected {
                border-color: #e0301e;
                color: #e0301e;
                cursor: pointer;
                border-bottom: solid 1px #fff;
            }

    .right-list-right p {
        text-align: center;
        margin: 0;
    }

    .Name-content-right {
        margin-left: 30px;
    }

    .talent-left-top-2 {
        border: solid 1px #DEDEDE;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 210px);
    }

    .Name-content h1 {
        font-size: 30px;
    }

    .Name-content p {
        font-size: 18px;
    }

        .Name-content p.Name-title {
            font-size: 16px;
        }

    .talent-right-2-but {
        border: solid 1px #eaeaea;
        background: #fff;
        font-size: 12px;
        padding: 0 10px;
        line-height: 0;
        height: 30px;
    }

    .talent-right-2-m-1 {
        display: flex;
        justify-content: space-between;
    }

        .talent-right-2-m-1 p {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .talent-right-2-m-1 i {
            border-radius: 50%;
            color: #ccc;
            margin: 0 5px;
            cursor: pointer;
        }


            .talent-right-2-m-1 i.talent-right-2-m-1-active {
                color: #e0301e;
            }

    .talent-right-2-but i {
        background: #fff;
        color: #eaeaea;
        padding: 0;
        margin: 0;
    }

    .talent-right-2-but.active i {
        background: #e0301e;
        color: #fff;
    }

    .chart-Interests {
        height: 300px;
    }

    .btn-edit {
        cursor: pointer;
    }

    .talent-right-2-m-1 i {
        font-size: 20px;
    }
    /*ipad*/

    @media screen and (min-device-width:768px) and (max-device-width: 1366px) {
    }

    @media(max-width:1000px) {
        .talent {
            width: 100%;
            flex-direction: column;
        }

        .talent-left {
            width: 100%;
            margin-right: 0;
        }

        .talent-left-top {
            padding: 10px;
        }

        .Name-title span {
            width: 80px;
        }

        .photo-img {
            width: 100px;
            height: 100px;
        }

        .talent-left-top-2 {
            width: calc(100% - 110px);
            padding: 5px;
            border: none;
            flex-flow: column;
        }

        .Name-content {
            margin-left: 5px;
        }

        .Name-content-right {
            display: block;
            margin: 0;
        }

        .photo-constellatory {
            width: 40px;
            height: 40px;
            left: -30px;
        }

        .edit-button {
            flex-flow: row;
        }

            .edit-button button {
                margin: 10px 5px;
            }

        .talent-left-main {
            flex-flow: column;
        }

        .talent-left-main-left,
        .talent-left-main-right,
        .talent-right {
            width: calc(100% - 20px);
            margin: 0 10px;
            overflow: hidden;
        }

        .talent-right {
            margin-top: 15px;
        }
    }

    .Radar-chart {
        margin-top: 0;
        height: 30vh;
        width: 100%;
    }

    @media(max-width:1000px) {
        .Radar-chart {
            height: 50vh;
            width: 100%;
        }

        .Name-content h1 {
            font-size: 22px;
            margin: 0 0 5px -2px;
        }

        .Name-content p {
            margin: 0 0 5px 0;
            font-size: 16px;
        }

            .Name-content p.Name-title {
                font-size: 14px;
                margin: 0 0 5px 0;
            }
    }
</style>

<!--page style begin-->
<style>
    .skills-main,
    .skills-main li,
    h3,
    .skills-main li ul,
    .skills-main li ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .skills-main {
        height: 400px;
        overflow: auto;
    }

        .skills-main li {
            margin-bottom: 15px;
        }

            .skills-main li h3 {
                font-size: 16px;
                color: #8f8f8f;
                margin-bottom: 5px;
                font-weight: bold;
                margin-left: 5px;
            }

            .skills-main li ul {
                display: flex;
                flex-wrap: wrap;
            }

                .skills-main li ul li {
                    background: #fff;
                    color: #e0301e;
                    font-size: 12px;
                    border-radius: 25px;
                    padding: 3px 15px;
                    margin-right: 5px;
                    border: solid 1px #e0301e;
                    margin-bottom: 10px;
                }

                    .skills-main li ul li.skills-active {
                        background: #e0301e;
                        color: #fff;
                        cursor: pointer;
                    }

                    .skills-main li ul li:hover {
                        cursor: pointer;
                    }

    .talent-right-Title {
        justify-content: space-between;
        display: flex;
        height: 30px;
        align-items: center;
    }

        .talent-right-Title i {
            font-size: 20px;
            color: #8f8f8f;
        }
</style>
<!--page style end-->

<style>
    i.silver {
        background: #c1c1c1;
    }
</style>

<body>
    <div class="loadingoverlay" style="background-color: rgba(255, 255, 255, 0.99); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; background-image: url(&quot;&quot;); background-position: center center; background-repeat: no-repeat; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 100px;"></div>
    <div class="talent" id="talent">
        <div class="talent-left">
            <div class="talent-left-top">
                <div class="talent-left-top-1">
                    <div class="photo">
                        <div class="photo-img">
                            <img v-bind:src="StaffInfo.icon" />
                        </div>
                    </div>
                </div>
                <div class="talent-left-top-2">
                    <div class="Name-content">
                        <h1>{{StaffInfo.UserName}} {{StaffInfo.NativeName}}</h1>
                        <p><span>{{StaffInfo.JobTitle}} </span><span class="Name-content-right">{{StaffInfo.BUDesc}}</span></p>
                        <p class="Name-title Name-title-1"><span>Extension</span>{{StaffInfo.Phone}}</p>
                        <p class="Name-title"><span>City</span>{{StaffInfo.CountryOffice}}</p>
                    </div>
                    <div class="edit-button">
                        <button><i class="mdi mdi-calendar-blank"></i>Schedule</button>
                        <button><i class="mdi mdi-chart-timeline"></i>Timesheet</button>
                    </div>
                </div>
            </div>
            <div class="talent-left-main">
                <div class="talent-left-main-left">
                    <h3>Skills matrix & competencies</h3>
                    <div class="Radar-chart" id="Radar_chart"></div>
                </div>
                <div class="talent-left-main-right">
                    <div class="talent-left-main-right-top">
                        <div class="talent-left-main-right-top-1">Projects experience</div>
                        <div class="talent-left-main-right-top-2">FY20<i></i></div>
                    </div>
                    <div class="talent-left-main-right-list">
                        <div class="talent-left-main-right-tab" v-show="false">
                            <p v-bind:class="{'PSelected':ProjectType=='Highlights'}" v-on:click="ProjectType='Highlights'">Highlights ({{ProjectTypeCount(1)}}) </p>
                            <p v-bind:class="{'PSelected':ProjectType=='In Progress'}" v-on:click="ProjectType='In Progress'">In Progress ({{ProjectTypeCount(2)}})</p>
                            <p v-bind:class="{'PSelected':ProjectType=='Completed'}" v-on:click="ProjectType='Completed'">Compeleted ({{ProjectTypeCount(3)}})</p>
                        </div>
                        <ul v-if="ProcessedProjectList.length>0">
                            <li v-for="o in ProcessedProjectList">
                                <span v-show="o.Highlights" class="label label-warning" style="width:70px;padding:5px;border-radius:20px; background: #e0301e">Highlight</span>
                                <p class="right-list-title">{{o.ProjectName}}</p>
                                <div class="right-list-content">
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message" v-bind:class="{'silver':o.ScoreItemAverage1==0}"></i><span v-show="o.ScoreItemAverage1>0">{{o.ScoreItemAverage1 | filter1}}</span></p>
                                        <p><i class="mdi mdi-brightness-7" v-bind:class="{'silver':o.ScoreItemAverage2==0}"></i><span v-show="o.ScoreItemAverage2>0">{{o.ScoreItemAverage2 | filter1}}</span></p>
                                        <p><i class="mdi mdi-thumb-up" v-bind:class="{'silver':o.ScoreItemAverage3==0}"></i><span v-show="o.ScoreItemAverage3>0">{{o.ScoreItemAverage3 | filter1}}</span></p>
                                        <p><i class="mdi mdi-stadium" v-bind:class="{'silver':o.ScoreItemAverage4==0}"></i><span v-show="o.ScoreItemAverage4>0">{{o.ScoreItemAverage4 | filter1}}</span></p>
                                        <p><i class="mdi mdi-account-multiple" v-bind:class="{'silver':o.ScoreItemAverage5==0}"></i><span v-show="o.ScoreItemAverage5>0">{{o.ScoreItemAverage5 | filter1}}</span></p>
                                    </div>
                                </div>

                            </li>
                        </ul>
                        <ul v-else stle="">
                            <span style="min-height: 100px; display: flex;align-items: center;justify-content: center;">No datas.</span>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="talent-right">
            <div class="talent-right-1">
                <div class="talent-right-Title">Has worked with</div>
                <div class="talent-right-1-m">
                    <p v-for="o in MembersDisplay" v-bind:title="o.StaffName">
                        <i>
                            <a target="_blank" v-bind:href="o.pageUrl"><img v-bind:src="o.imgUrl" /></a>
                        </i>
                    </p>
                    <p v-show="MembersSurplus>0" v-on:click="MenberPagging()">
                        <i>
                            <span style="width:50px;height:50px;display:flex;justify-content:center;align-items:center;">
                                {{MembersSurplus}} +
                            </span>
                        </i>
                    </p>
                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">
                    <span>Skills and endorsements</span>
                    <i class="mdi mdi-pencil-box btn-edit"></i>
                </div>
                <div class="talent-right-2-m">

                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">
                    Hobbies and Interests
                    <i v-show="IsCurrentUser" class="mdi mdi-pencil-box" style="cursor:pointer;" v-on:click="OpenMyHobbies()"></i>
                </div>
                <div id="echarts_wordcloud" style="height:200px;width:100%;border:1px solid #eee;border-top:0px;">

                </div>
            </div>
        </div>

        <div class="modal fade" id="myHobbies" tabindex="-1" role="dialog" aria-labelledby="myHobbiesLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Edit your hobbies and interests</h4>
                    </div>

                    <div class="modal-body">
                        <ul class="skills-main" pid="">
                            <li v-for="ct in UserHobbiesDatasForEdit">
                                <h3>{{ct.Category}}</h3>
                                <ul class="sub-list">
                                    <li v-for="o in ct.items" v-bind:class="{'skills-active':o.check}" v-on:click="o.check=!o.check">{{o.Option}}</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" v-on:click="SaveHobbies()">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Edit your skills</h4>
                </div>

                <div class="modal-body">
                    <ul class="total-list skills-main" pid="">
                        <li>
                            <h3>IT Skill</h3>
                            <ul class="sub-list">
                                <li class="skills-active">Python</li>
                                <li>Python</li>
                                <li>Python</li>
                                <li>Python</li>
                            </ul>
                        </li>
                        <li>
                            <h3>IT Skill</h3>
                            <ul class="sub-list">
                                <li class="skills-active">Python</li>
                                <li>Python</li>
                                <li>Python</li>
                                <li>Python</li>
                            </ul>
                        </li>
                        <li>
                            <h3>IT Skill</h3>
                            <ul class="sub-list">
                                <li class="skills-active">Python</li>
                                <li>Python</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-save">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <!--Common.js-->
    <script type="text/javascript" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=b21a8457-24f9-452f-bfae-c94df0c31f59&version=201910241847"></script>
    <!--echart.js-->
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=b123e371-c787-4b9f-836d-b29ef3569a5b"></script>
    <!--echarts-wordcloud.js-->
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=d0ff5ada-1df6-4a00-a31f-8c71798ed488"></script>
    <script>
        var organizationCode = "PwCCNHK";
        var requrl = getAppHomeUrl() + "/customapi/RetrieveQueryDocs";
        var userUrl = getAppHomeUrl() + "/customapi/GetUserInfo";
        var pageUrl = getAppHomeUrl() + "/Pages/StaffInfo?dataid={{0}}";
        var iconUrl = "http://hkapppwv918/ImageWebApi/api/Image/{{0}}?type=1";
        var TotalScoreItem = 10;
        var score = 4;

        var HobbiesDatas = [{
            "Category": "Sports",
                "items": [{
                    "Option": "Basketball"
                },
                {
                    "Option": "Football"
                },
                {
                    "Option": "Volleyball"
                },
                {
                    "Option": "Marathon running"
                },
                {
                    "Option": "Skiing"
                },
                {
                    "Option": "Tennis"
                },
                {
                    "Option": "Cycling"
                },
                {
                    "Option": "Swimming"
                },
                {
                    "Option": "Baseball"
                },
                {
                    "Option": "Mountain climbing"
                }
            ]
        },
	    {
	    "Category": "Analytical Thinking",
	    "items": [{
	        "Option": "Chess"
	    },
			{
			    "Option": "Playing a musical instrument"
			},
			{
			    "Option": "Reading"
			},
			{
			    "Option": "Writing"
			},
			{
			    "Option": "Sketching"
			},
			{
			    "Option": "Photography"
			},
			{
			    "Option": "Design"
			},
			{
			    "Option": "Painting"
			}
	    ]
	},
	{
	    "Category": "Social",
	    "items": [{
	        "Option": "Boardgames"
	    },
			{
			    "Option": "Creating and organizing a book club"
			},
			{
			    "Option": "Networking events"
			},
			{
			    "Option": "Local meetups"
			},
			{
			    "Option": "Volunteering at a charity center"
			},
			{
			    "Option": "Public speaking"
			},
			{
			    "Option": "Exploring other cultures"
			},
			{
			    "Option": "Dancing"
			},
			{
			    "Option": "Camping "
			},
			{
			    "Option": "Language classes"
			}
	    ]
	},
	{
	    "Category": "Unique",
	    "items": [{
	        "Option": "Archery"
	    },
			{
			    "Option": "Gardening"
			},
			{
			    "Option": "Stand-up comedy"
			},
			{
			    "Option": "Baking"
			},
			{
			    "Option": "Journaling"
			},
			{
			    "Option": "Calligraphy"
			},
			{
			    "Option": "Fencing"
			},
			{
			    "Option": "Theater"
			},
			{
			    "Option": "Yoga"
			},
			{
			    "Option": "Languages"
			}
	    ]
	}
];

        function guid() {
            return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return '';
        };

        function IsNotNull(value) {
            return value !== "" && value !== null && value !== undefined ? true : false;
        };

        function GetScore(value) {
            return value !== "" && value !== null && value !== undefined ? value : 0;
        };

        function compare(property) {
            return (firstobj, secondobj) => {
                const firstValue = firstobj[property];
                const secondValue = secondobj[property];
                return secondValue - firstValue;
            };
        };
    </script>
    <script>
        var vm = new Vue({
            el: '#talent',
            filters: {
                filter1: function (value) {
                    var v = (value / 1.0).toFixed(1);
                    return v;
                }
            },
            data: {
                StaffCode: "",
                StaffInfo: {},
                MyProjectList:[],
                ScoreItemList: [],
                Members: [],
                MembersIndex: 0,
                MembersDisplay: [],
                MembersSurplus:0,
                ProjectType: "All",
                ProjectCount: [0, 0, 0],
                ProjectScoreItemsByGroup: [],
                RadaChatData: [0, 0, 0, 0, 0],
                RadaIndicator: [{
                    text: 'Communication \n& Presentation',
                    max: 5
                }, {
                    text: 'Proactiveness\n',
                    max: 5
                }, {
                    text: 'Business\n Sense',
                    max: 5
                }, {
                    text: 'Mind-set \n& Attitude',
                    max: 5
                }, {
                    text: 'Professional\n Image',
                    max: 5
                }],
                HobbiesId:"",
                UserHobbiesDatasForEdit: [],
            },
            computed: {
                ProcessedProjectList: function () {
                    var list = [];
                    $.each(this.ProjectScoreItemsByGroup, function (i, o) {
                        if (vm.$data.ProjectType == "All") {
                            o.tatal = o.ScoreItemAverage1 + o.ScoreItemAverage2 + o.ScoreItemAverage3 +
                                o.ScoreItemAverage4 + o.ScoreItemAverage5;

                            o.Highlights = false;
                            if (o.ScoreItemAverage1 >= score &&
                                o.ScoreItemAverage2 >= score &&
                                o.ScoreItemAverage3 >= score &&
                                o.ScoreItemAverage4 >= score &&
                                o.ScoreItemAverage5 >= score)
                                o.Highlights = true;
                            list.push(o);

                        } else if (vm.$data.ProjectType == "In Progress" && o.ProjectStatus == "Active") {
                            list.push(o);
                        } else if (vm.$data.ProjectType == "Completed" && o.ProjectStatus == "Completed") {
                            list.push(o);
                        } else if (vm.$data.ProjectType == "Highlights" &&
                            o.ScoreItemAverage1 >= score &&
                            o.ScoreItemAverage2 >= score &&
                            o.ScoreItemAverage3 >= score &&
                            o.ScoreItemAverage4 >= score &&
                            o.ScoreItemAverage5 >= score) {
                            list.push(o);
                        }
                    });
                    return list = list.sort(compare("tatal"));
                },
                ProjectTypeCount: function () {
                    return function (type) {
                        var count = 0;
                        $.each(this.ProjectScoreItemsByGroup, function (i, o) {
                            if (type == 1 && o.ScoreItemAverage1 >= score &&
                                o.ScoreItemAverage2 >= score &&
                                o.ScoreItemAverage3 >= score &&
                                o.ScoreItemAverage4 >= score &&
                                o.ScoreItemAverage5 >= score) {
                                count += 1;
                            }
                            if (type == 2 && o.ProjectStatus == "Active") {
                                count += 1;
                            } else if (type == 3 && o.ProjectStatus == "Completed") {
                                count += 1;
                            }
                        });
                        return count;
                    }
                },
                IsCurrentUser: function () {
                    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
                    var StaffCode = currentUser.StaffCode;
                    if (this.StaffInfo.StaffCode == StaffCode) return true;
                    return false;
                }
            },
            methods: {
                getUser: function () {
                    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
                    var StaffCode = currentUser.StaffCode;
                    vm.$data.StaffCode = newStaffCode;

                    var newStaffCode = window.atob(getUrlParam("dataid"));
                    if (newStaffCode == "") {
                        vm.$data.StaffCode = StaffCode;
                        vm.$data.StaffInfo = currentUser;
                        var tempUrl = iconUrl;
                        vm.$data.StaffInfo.icon = tempUrl.replace("{{0}}", currentUser.StaffCode);
                        return;
                    }
                    vm.$data.StaffCode = newStaffCode;
                    console.log("vm.$data.StaffCode", vm.$data.StaffCode);

                    var Jsondata = {
                        staffCode: vm.$data.StaffCode,
                        organizationCode: organizationCode
                    };
                    $.ajax({
                        url: userUrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function (response) {
                            vm.$data.StaffInfo = response.Data.UserInfo;
                            var tempUrl = iconUrl;
                            vm.$data.StaffInfo.icon = tempUrl.replace("{{0}}", response.Data.UserInfo.StaffCode);
                            console.log("vm.$data.StaffInfo", vm.$data.StaffInfo);
                        }
                    });
                },
                GetMyJoinProjects:function(){
                    var tempMembers = [];
                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "scwxagpisbf";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.Columns = ["Metadata-PwCPersons_relationsvalue", "ProjectID"];
                    Jsondata.SearchItem.push({
                        "Name": "FlagDeleted",
                        "Value": 0,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    Jsondata.SearchItem.push({
                        "Name": "PwCPersons",
                        "Value": vm.$data.StaffCode,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function (response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    var UserArray = [];
                                    $.each(response.Data.rows, function (index, item) {
                                        if (vm.$data.MyProjectList.indexOf(item.ProjectID)<0)
                                        vm.$data.MyProjectList.push(item.ProjectID);
                                    });
                                    console.log("vm.$data.MyProjectList", vm.$data.MyProjectList);
                                }

                                /*get members*/
                                vm.GetMenbers();
                                /*get projectLists*/
                                vm.GetScoreItemList();
                            }
                        }
                    });
                },

                GetScoreItemList: function () {
                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "fzkfpy3v44";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.SearchItem.push({
                        "Name": "IsDeleted",
                        "Value": 0,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    Jsondata.SearchItem.push({
                        "Name": "TargetUserId",
                        "Value": vm.$data.StaffCode,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });

                    Jsondata.SearchItem.push({
                        "Name": "ProjectId",
                        "Value": vm.$data.MyProjectList.join("|C4|"),
                        "Operator": 'In',
                        'Method': 'AND'
                    });

                    Jsondata.SearchItem.push({
                        "Name": "TargetUserId",
                        "Value": vm.$data.StaffCode,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function (response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    $.each(response.Data.rows, function (index, item) {
                                        if (vm.$data.MyProjectList.indexOf(item.ProjectId)>=0)
                                        vm.$data.ScoreItemList.push(item);
                                    });
                                    console.log("ScoreItemList", vm.$data.ScoreItemList);
                                }
                            }
                            vm.ProjcessProjectScoreItems();
                            vm.InitRadaChat();
                            vm.ProcessProjectList();
                        }
                    });
                },

                ProjcessProjectScoreItems: function () {
                    if (vm.$data.ScoreItemList.length == 0) return;
                    $.each(vm.$data.MyProjectList, function (index, o) {
                        var tempList = [];
                        var obj;

                        $.each(vm.$data.ScoreItemList, function (i, k) {
                            if (k.ProjectId == o) {
                                tempList.push(k);
                                obj = {
                                    ProjectId: k.ProjectId,
                                    ProjectName: k.ProjectName,
                                    TargetUserId: k.TargetUserId,
                                    TargetUserName: k.TargetUserName,
                                    ProjectStatus: ""
                                };
                            }
                        });

                        if (tempList.length == 0) {
                            tempList.push({
                                "C4-CreateById": "System",
                                "C4-CreateBy":"System"
                            });
                            obj = {
                                ProjectId: o,
                                ProjectName: "",
                                TargetUserId: "",
                                TargetUserName: "",
                                ProjectStatus: ""
                            };
                        }

                        obj.count = tempList.length;
                        obj.Creaters = [];
                        for (i = 1; i <= TotalScoreItem; i++) {
                            obj["ScoreItem" + i.toString()] = 0;
                            obj["ScoreItemCount" + i.toString()] = 0;
                            obj["ScoreItemAverage" + i.toString()] = 0;
                        }
                        $.each(tempList, function (i, k) {
                            obj.Creaters.push({
                                CreateById: k["C4-CreateById"],
                                CreateBy: k["C4-CreateBy"]
                            });
                            for (i = 1; i <= TotalScoreItem; i++) {
                                var vl = GetScore(k["ScoreItem" + i.toString()]);
                                obj["ScoreItem" + i.toString()] += vl;
                                obj["ScoreItemCount" + i.toString()] += vl == 0 ? 0 : 1;
                            }

                        });
                        for (i = 1; i <= TotalScoreItem; i++) {
                            var score = obj["ScoreItem" + i.toString()];
                            var count = obj["ScoreItemCount" + i.toString()];
                            var Divisor = count == 0 ? 1 : count;
                            obj["ScoreItemAverage" + i.toString()] = (score / Divisor).toFixed(3) / 1;
                        };

                        vm.$data.ProjectScoreItemsByGroup.push(obj);
                    });

                    console.log("ProjectScoreItemsByGroup", vm.$data.ProjectScoreItemsByGroup);



                    var tpRadar = {};
                    for (i = 1; i <= TotalScoreItem; i++) {
                        tpRadar["ScoreTotal" + i.toString()] = 0;
                        tpRadar["ScoreCount" + i.toString()] = 0;
                    }


                    $.each(vm.$data.ProjectScoreItemsByGroup, function (index, o) {
                        for (i = 1; i <= TotalScoreItem; i++) {
                            tpRadar["ScoreTotal" + i.toString()] += o["ScoreItemAverage" + i.toString()];
                            var count = o["ScoreItemCount" + i.toString()];
                            tpRadar["ScoreCount" + i.toString()] += count == 0 ? 0 : 1;
                        }

                    });

                    for (i = 1; i <= TotalScoreItem; i++) {
                        var count = tpRadar["ScoreCount" + i.toString()];
                        count = count == 0 ? 1 : count;
                        var total = tpRadar["ScoreTotal" + i.toString()];
                        tpRadar["tpRadar" + i.toString()] = (total / count).toFixed(1) / 1.0;
                    }
                    console.log("tpRadar", tpRadar);

                    vm.$data.RadaChatData = [];
                    for (i = 1; i <= 5; i++) {
                        var index = i + 0;
                        var vl = tpRadar["tpRadar" + index.toString()];
                        vm.$data.RadaChatData.push(vl);
                        vm.$data.RadaIndicator[i - 1].text = vm.$data.RadaIndicator[i - 1].text + " （" + vl + " )";
                    }
                    console.log("vm.$data.RadaChatData", vm.$data.RadaChatData);


                },

                ProcessProjectList: function () {
                    var tempProjectList = [];
                    $.each(vm.$data.ProjectScoreItemsByGroup, function (index, o) {
                        if (o.ProjectName == "") {
                            tempProjectList.push(o.ProjectId);
                        }
                    });
                    if (tempProjectList.length==0) return;


                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "7m2ncu0h5i";
                    Jsondata.index = 0;
                    Jsondata.size = 1000;
                    Jsondata.Columns = ["_id", "ProjectNameNew"];
                    Jsondata.SearchItem.push({
                        "Name": "_id",
                        "Value": tempProjectList.join("|C4|"),
                        "Operator": 'In',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: false,
                        success: function (response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    $.each(response.Data.rows, function (index, item) {
                                        for (i = 0; i < vm.$data.ProjectScoreItemsByGroup.length; i++) {
                                            var k = vm.$data.ProjectScoreItemsByGroup[i];
                                            if (k.ProjectId == item._id) k.ProjectName = item.ProjectNameNew;
                                        }
                                    });
                                }
                            }
                        }
                    });

                },


                InitRadaChat: function () {
                    var dom = document.getElementById("Radar_chart");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {

                        color: ['#fc9703', '#00ff00', "#0000ff"],
                        radar: [{
                            name: {
                                show: true,
                                formatter: null,
                                textStyle: {
                                    color: '#fc9703',
                                    "fontSize": 12
                                }
                            },
                            indicator: vm.$data.RadaIndicator,
                            center: ['50%', '50%'],
                            radius: 70
                        }],
                        series: [{
                            type: 'radar',
                            tooltip: {
                                trigger: 'item'
                            },
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: 'default'
                                    }
                                }
                            },
                            data: [{
                                value: vm.$data.RadaChatData,
                                name: 'Assessment'
                            }]
                        }]
                    };
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                },

                GetMenbers: function () {
                    console.log("GetMenbers");
                    if (vm.$data.MyProjectList.length == 0) return;
                    var tempMembers = [];
                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "scwxagpisbf";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.Columns = ["Metadata-PwCPersons_relationsvalue"];
                    Jsondata.SearchItem.push({
                        "Name": "FlagDeleted",
                        "Value": 0,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    Jsondata.SearchItem.push({
                        "Name": "ProjectID",
                        "Value": vm.$data.MyProjectList.join("|C4|"),
                        "Operator": 'In',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function (response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    var UserArray = [];
                                    $.each(response.Data.rows, function (index, item) {
                                        $.each(item["Metadata-PwCPersons_relationsvalue"], function (i, o) {

                                            if (o != "" && tempMembers.lastIndexOf(o.StaffId) == -1
                                                && o.StaffId != "CN445762" &&
                                                o.StaffId != "CN410831" & o.StaffId != vm.$data.StaffCode)
                                            {
                                                tempMembers.push(o.StaffId);
                                                UserArray.push(o);
                                            }
                                        });
                                    });

                                    $.each(UserArray, function (i, o) {
                                        var tImgUrl = iconUrl;
                                        var tpageUrl = pageUrl;
                                        vm.$data.Members.push({
                                            StaffName:o.StaffName,
                                            imgUrl: tImgUrl.replace("{{0}}", o.StaffId),
                                            pageUrl: tpageUrl.replace("{{0}}", window.btoa(o.StaffId))
                                        });
                                    });
                                    vm.$data.MembersSurplus = UserArray.length;
                                    vm.MenberPagging();
                                    console.log("vm.$data.Members", vm.$data.Members);
                                }
                            }

                        }
                    });
                },
                MenberPagging: function () {

                    if (this.MembersSurplus <= 0) return;
                    var pagesize = 10;
                    var start = (pagesize * this.MembersIndex) + 1;
                    this.MembersIndex += 1;
                    var end = pagesize * this.MembersIndex;
                    if (pagesize > this.MembersSurplus) end = this.Members.length;
                    for (i = start; i <= end; i++) {
                        var k = {};
                        $.extend(k, this.Members[i - 1]);
                        this.MembersDisplay.push(k);
                    }
                    this.MembersSurplus = this.Members.length - this.MembersDisplay.length;
                },

                GetHobbies: function () {

                    var tempList = [];
                    $.extend(tempList, HobbiesDatas);
                    vm.$data.UserHobbiesDatasForEdit = tempList;

                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "ac630mi5xn";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.Columns = ["MetaData", "Hobbies", "_id"];
                    Jsondata.SearchItem.push({
                        "Name": "C4-CreateById",
                        "Value": vm.$data.StaffCode,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    Jsondata.SearchItem.push({
                        "Name": "DataType",
                        "Value": "Hobbies",
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });



                    $.ajax({
                        url:requrl,
                        type: 'post',
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(Jsondata),
                        dataType: 'json',
                        async: true,
                        success: function (response) {
                            var Hobbies = [];
                            if (response.StatusCode === 200 && response.Data.total > 0) {
                                var Hobbies = response.Data.rows[0].Hobbies.split(',');
                                vm.$data.HobbiesId = response.Data.rows[0]._id;
                                $.each(vm.$data.UserHobbiesDatasForEdit, function (i, o) {
                                    $.each(o.items, function (index, k) {
                                        k.check = false;
                                        if (Hobbies.indexOf(k.Option) >= 0) k.check = true;
                                    });
                                });
                                console.log("vm.$data.UserHobbiesDatasForEdit", vm.$data.UserHobbiesDatasForEdit);
                            }
                            vm.InitwordcloudChat();
                        }
                    });
                },
                SaveHobbies: function () {
                    if (!this.IsCurrentUser) {
                        alert("You have no permition to do it.");
                        return;
                    }
                    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
                    var HobbiesArray = [];
                    $.each(vm.$data.UserHobbiesDatasForEdit, function (i, o) {
                        $.each(o.items, function (index, k) {
                            if (k.check) HobbiesArray.push(k.Option);
                        });
                    });

                    var docids = vm.$data.HobbiesId;
                    var formAlias = 'DataForm';
                    var url = getAppHomeUrl() + '/customapi/SaveDocument';
                    var document = {
                        DataType: "Hobbies",
                        MetaData: HobbiesArray.join(","),
                        Hobbies: HobbiesArray.join(",")
                    };

                    vm.$data.HobbiesId = guid();
                    var Jsondata = {
                        DataId:vm.$data.HobbiesId,
                        FormAlias: 'DataForm',
                        UserName: currentUser.StaffName,
                        UserId: currentUser.StaffCode,
                        Message: 'Save a Hobbies',
                        Data: document
                    };

                    if (docids != "") {
                        url = getAppHomeUrl() + '/customapi/BatchUpdateDocs';
                        Jsondata = {
                            DocIds:[docids],
                            EntityName: 'DataForm',
                            StaffName: currentUser.StaffName,
                            StaffId: currentUser.StaffCode,
                            ActionMessage: 'update a Hobbies',
                            FieldsValue: document
                        };
                    }

                    $.ajax({
                        url:url,
                        type: 'post',
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(Jsondata),
                        dataType: 'json',
                        async: false,
                        success: function (response) {
                            if (response.StatusCode === 200) {
                                console.log("SaveHobbies", response);
                                $("#myHobbies").modal('hide');
                                vm.InitwordcloudChat();
                            }
                        }
                    });
                },
                OpenMyHobbies: function () {
                    if (!this.IsCurrentUser) {
                        alert("You have no permition to do it.");
                        return;
                    }
                    $("#myHobbies").modal({
                        hide: true
                    });
                },
                InitwordcloudChat: function () {
                    var Hobbies = [];
                    $.each(this.UserHobbiesDatasForEdit, function (i, o) {
                        $.each(o.items, function (index, k) {
                            var t = k.Option.length > 15 ? k.Option.substr(0, 13) + "..." : k.Option;
                            t = k.Option;
                            if (k.check) Hobbies.push(t);
                        });
                    });

                    if (Hobbies.length == 0) {
                        Hobbies.push("None");
                    }
                    var list = [];
                    var i = 1;
                    $.each(Hobbies, function (i, o) {
                        i += 1;
                        list.push({
                            name: o
                         , value: 500 - i * 5
                        });
                    });
                    console.log("GetHobbiesChatDatas", list);

                    var chatDatas = list;

                    var chart = echarts.init(document.getElementById('echarts_wordcloud'));

                    var colorList = [];
                    var finalDataList = [];

                    colorList.push("#ff0000","#e96202","#333333");
                    var option = {
                        backgroundColor: '#fff',
                        tooltip: {
                            show: false
                        },
                        title: {
                            left: 'center',
                            top: 0
                        },
                        series: [{
                            type: 'wordCloud',
                            gridSize: 1,
                            sizeRange: [9, 22],
                            shape: 'smooth',
                            rotationRange : [ 0,10 ],
                            textStyle: {
                                normal: {
                                    color: function (params) {
                                        return colorList[Math.round(Math.random() * (colorList.length - 1))];
                                    },
                                    backgroundColor: 'rgba(0,0,0,0)',
                                }
                            },
                            left: 'center',
                            top: 'center',
                            width: '96%',
                            height: '98%',
                            right: 0,
                            bottom: 0,
                            drawOutOfBound: false,
                            data: chatDatas
                        }]
                    };
                    chart.setOption(option);
                }
            }
        });

        function init() {
            vm.getUser();
            vm.GetScoreItemList();
            vm.GetHobbies();
            vm.GetMyJoinProjects();
            $(".loadingoverlay").hide();
        }
        $(function () {
            init();
        });
    </script>
    <!--Skill function-->
    <!--Linq.min.js-->
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=dbc055b9-7879-4a87-bdcc-56129f1b9170"></script>
    <!--CategorySkills.js-->
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=1b8c6992-7eb1-4c23-aa91-9b20254c7908&v=20191015100011"></script>
    <!--ProjectSkills.js-->
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=46904866-e85a-40fd-a020-5adf2b032e3d&v=201910281726"></script>
</body>

</html>